<template>
	<view class="content">
		<view class="cc" v-if="userData">
			<image class="image" :src="userData.userInfo.avatar||'https://www.soccerpet.com/static/img/default_photo.png'"></image>
			<view class="cc-center">
				<view class="c-tt">{{userData.userInfo.nickname}}</view>
				<view style="display: flex;align-items: center;">
					<image src="../../static/image/index/h1.png" style="min-width: 20px;width: 20px; height: 20px;margin-right: 2px;"></image>
					：<text v-for="(zq,index) in userData.userInfo.rankTagsFb" :key="index" style="margin-right: 5px;">{{zq}}</text></view>
				<view style="display: flex;align-items: center;">
					<image src="../../static/image/index/lq.png" style="min-width: 22px;width: 22px;height: 22px;"></image>
					：<text v-for="(lq,index) in userData.userInfo.rankTagsBk" :key="index" style="margin-right: 5px;">{{lq}}</text></view>
			</view>
			<view class="cc-right">
				<view class="btn" :class="{myFollow:myFollow.includes(parseInt(userData.userInfo.uid))}" @click="attention">
				{{myFollow.includes(parseInt(userData.userInfo.uid))==true?$t('yuce.yiguanzhu'):$t('yuce.guanzhu')}}
				</view>
				<view  v-if="userData.userInfo.attentionNum!=0" class="text" style="margin-top: 5px;"><text style="margin-right: 5px;color: red;font-weight: bold;">{{userData.userInfo.attentionNum}}</text>{{$t('yuce.yiguanzhu')}}</view>
			</view>
		</view>
		<view class="btn-warp">
			<view class="btn" :class="{active:matchType==1}" @click="clickBtn(1)">
				{{$t('yuce.zuqiu')}}
				
			</view>
			<view class="btn" :class="{active:matchType==2}" @click="clickBtn(2)">
				{{$t('yuce.lanqiu')}}
				
			</view>
		</view>
		<view class="ccc">
			<view class="mark-1">
				<view class="block-box" v-if="matchType==1&&userData">
					<template v-for="(item,index) in userData.recordFb.tenResult">
						<template v-if="userData.recordFb.tenResult.length-1!=index">
							<view class="block"  :class="{
							'top-line':item=='1'&&userData.recordFb.tenResult[index+1]=='1',
							'left-line':item=='1'&&userData.recordFb.tenResult[index+1]!='1',
							'right-line':(item=='2'||item=='-1')&&userData.recordFb.tenResult[index-1]=='1',
							'right-line':(item=='2'||item=='-1')&&userData.recordFb.tenResult[index+1]=='1',
							'bottom-line':item=='-1'&&(userData.recordFb.tenResult[index+1]=='2'||userData.recordFb.tenResult[index+1]=='-1'),
							}">
								<template v-if="item=='1'">
									<view class="bc-red">
										<image src="../../static/image/yuce/hong.png" style="width: 20px;height: 20px;"></image>
									</view>
								</template>
								<template v-else-if="item=='-1'">
									<view class="bc-close">
										<image src="../../static/image/yuce/hei.png" style="width: 20px;height: 20px;"></image>
									</view>
								</template>
								<template v-else-if="item=='2'">
									<view class="bc-green">
										<image src="../../static/image/yuce/ping.png" style="width: 20px;height: 20px;"></image>
									</view>
								</template>
							</view>
						</template>
						<template v-else>
							<view class="last-block">
								<template v-if="item=='1'">
									<view class="bc-red">
										<image src="../../static/image/yuce/hong.png" style="width: 20px;height: 20px;"></image>
									</view>
								</template>
								<template v-else-if="item=='-1'">
									<view class="bc-close">
										<image src="../../static/image/yuce/hei.png" style="width: 20px;height: 20px;"></image>
									</view>
								</template>
								<template v-else-if="item=='2'">
									<view class="bc-green">
										<image src="../../static/image/yuce/ping.png" style="width: 20px;height: 20px;"></image>
									</view>
								</template>
							</view>
						</template>
					</template>
				</view>
				<view class="block-box" v-if="matchType==2&&userData">
					<template v-for="(item,index) in userData.recordBk.tenResult">
						<template v-if="userData.recordBk.tenResult.length-1!=index">
							<view class="block"  :class="{
							'top-line':item=='1'&&userData.recordBk.tenResult[index+1]=='1',
							'left-line':item=='1'&&userData.recordBk.tenResult[index+1]!='1',
							'right-line':(item=='2'||item=='-1')&&userData.recordBk.tenResult[index-1]=='1',
							'right-line':(item=='2'||item=='-1')&&userData.recordBk.tenResult[index+1]=='1',
							'bottom-line':item=='-1'&&(userData.recordBk.tenResult[index+1]=='2'||userData.recordBk.tenResult[index+1]=='-1'),
							}">
								<template v-if="item=='1'">
									<view class="bc-red">
										<image src="../../static/image/yuce/hong.png" style="width: 20px;height: 20px;"></image>
									</view>
								</template>
								<template v-else-if="item=='-1'">
									<view class="bc-close">
										<image src="../../static/image/yuce/hei.png" style="width: 20px;height: 20px;"></image>
									</view>
								</template>
								<template v-else-if="item=='2'">
									<view class="bc-green">
										<image src="../../static/image/yuce/ping.png" style="width: 20px;height: 20px;"></image>
									</view>
								</template>
							</view>
						</template>
						<template v-else>
							<view class="last-block">
								<template v-if="item=='1'">
									<view class="bc-red">
										<image src="../../static/image/yuce/hong.png" style="width: 20px;height: 20px;"></image>
									</view>
								</template>
								<template v-else-if="item=='-1'">
									<view class="bc-close">
										<image src="../../static/image/yuce/hei.png" style="width: 20px;height: 20px;"></image>
									</view>
								</template>
								<template v-else-if="item=='2'">
									<view class="bc-green">
										<image src="../../static/image/yuce/ping.png" style="width: 20px;height: 20px;"></image>
									</view>
								</template>
							</view>
						</template>
					</template>
				</view>
				
				<view class="warp" v-if="userData">
					<view class="m1">
						<view>{{$t('yuce.suoyoufangan')}}</view>
						<view class="red">{{matchType==1? userData.recordFb.recommendCount:userData.recordBk.recommendCount}}</view>
					</view>
					<view class="m1">
						<view>{{$t('yuce.zhoumingzhong')}}</view>
						<view class="red">{{matchType==1? userData.recordFb.weekWinrate:userData.recordBk.weekWinrate}}</view>
					</view>
					<view class="m1">
						<view>{{$t('yuce.yuemingzhong')}}</view>
						<view class="red">{{matchType==1? userData.recordFb.monthWinrate:userData.recordBk.monthWinrate}}</view>
					</view>
					<view class="m1">
						<view>{{$t('yuce.jinsmz')}}</view>
						<view class="red">{{matchType==1? userData.recordFb.tenWinrate:userData.recordBk.tenWinrate}}</view>
					</view>
				</view>
				
			</view>
			
			<view class="zaishou">
				<view class="title">{{$t('yuce.zaishouyuce')}}</view>
				<template v-if="matchType==1&&userData">
					<!-- 足球 -->
					<view class="item" v-for="(item,index) in userData.recordFb.recommendOnSale" @click="navigatorTo(item)">
						<view class="i1">
							<view class="name">{{item.league}}</view>
							<view>{{$u.timeFormat(item.gtime, 'yyyy/mm/dd/ hh:MM')}}</view>
						</view>
						<view class="i2">
							{{item.title}}
						</view>
						<view class="i3">
							<view>{{item.playTypeStr}}</view>
							<view class="right">
								<view class="bbtn" v-if="item.propStr">{{item.propStr}}</view>
								<view class="num" style="margin-left: 10px;">{{item.money}}</view>
								<image class="image" src="../../static/image/yuce/zuanshi.png"></image>
							</view>
						</view>
					</view>
				</template>
				<template v-if="matchType!=1&&userData">
					<!-- 篮球 -->
					<view class="item" v-for="(item,index) in userData.recordBk.recommendOnSale" @click="navigatorTo(item)">
						<view class="i1">
							<view class="name">{{item.league}}</view>
							<view>{{$u.timeFormat(item.gtime, 'yyyy/mm/dd/ hh:MM')}}</view>
						</view>
						<view class="i2">
							{{item.title}}
						</view>
						<view class="i3">
							<view>{{item.playTypeStr}}</view>
							<view class="right">
								<view class="bbtn" v-if="item.propStr">{{item.propStr}}</view>
								<view class="num" style="margin-left: 10px;">{{item.money}}</view>
								<image class="image" src="../../static/image/yuce/zuanshi.png"></image>
							</view>
						</view>
					</view>
				</template>
				
				
			</view>
			
			<view class="zaishou">
				<view class="title">{{$t('yuce.lishiyuce')}}</view>
				<view class="item" v-for="(item,index) in history" @click="navigatorTo(item)">
					<view class="i1">
						<view class="name">{{item.league}}</view>
						<view>{{$u.timeFormat(item.gtime, 'yyyy/mm/dd/ hh:MM')}}</view>
					</view>
					<view class="i2" v-if="item.score">
						{{item.homeName}}<text style="color: #c72d5e;margin: 0 5px;">{{item.score.split('-')[0]}}</text>VS<text style="color: #c72d5e;margin: 0 5px;">{{item.score.split('-')[1]}}</text>
						{{item.awayName}}
					</view>
					<view class="i3">
						<view>{{item.playTypeStr}}</view>
						<view class="right">
							<!-- <view class="num">{{item.money}}</view> -->
							<image :src="computresult(item.result)" style="width: 20px;height: 20px;border-radius: 50%;"></image>
						</view>
					</view>
				</view>
				<view class="uni-loadmore" v-if="load.showLoadMore">{{load.loadMoreText}}</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['userInfo', 'api']),
			computresult(){
				return (result,type)=>{
					if(result==1){
						return '../../static/image/yuce/hong.png'
					}else if(result==2){
						return '../../static/image/yuce/ping.png'
					}else if(result==-1){
						return '../../static/image/yuce/hei.png'
					}
				}
			}
		},
		data() {
			return {
				type:0,
				uid:'',//用户id
				matchType:1,
				userData:'',//用户个人次信息
				list:[],
				history:[],//获取历史预测
				load:{
					end:false,//是否没有数据了
					page:1,
					loadMoreText: "加载中...",
					showLoadMore: false,
				},
				myFollow:[],//我关注的用户ID
				
			}
		},
		onLoad(op) {
			this.matchType = op.matchType
			this.uid = op.uid
			//用户个人主页（包含在售预测）
			this.expertHomepage()
			//获取历史预测
			this.expertHistoryFact()
			if(this.userInfo&&this.userInfo.id){
				//获取我关注的用户
				this.getAttentionUids([this.uid])
			}
		},
		onReachBottom() {
			if (this.load.end==true) {
				this.load.loadMoreText = "没有更多数据了!"
				return;
			}
			this.load.showLoadMore = true;
			this.load.page++
			this.expertHistoryFact();
		},
		methods:{
			navigatorTo(row){
				uni.navigateTo({
					url: '/pages/forecastDetails/forecastDetails?id='+row.id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			//关注或取关
			attention(){
				let type = 1
				let uid = parseInt(this.uid)
				if(this.myFollow.includes(uid)==true){
					type = 0
				}else{
					type = 1
				}
				if(this.userInfo.id){
					let params={
						uid:uid,
						type:type//类型 1关注  0取消关注
					}
					uni.$u.http.post(this.api.api_v1_user_attention, params).then(res => {
						if(res.code==200){
							uni.showToast({
								title: res.msg
							});
							if(type == 1){
								this.myFollow.push(uid)
							}else{
								this.myFollow = this.myFollow.filter(item=>item!=uid)
							}
							
						}
					})
				}else{
					uni.showToast({
						title: 'please log in first',
						icon:"none"
					});
				}
			},
			//获取我关注的用户
			getAttentionUids(uids){
				let params={
					uids:uids
				}
				uni.$u.http.post(this.api.api_v1_user_getAttentionUids, params).then(res => {
					if(res.code==200&&res.data){
						this.myFollow=res.data
					}
				})
			},
			
			clickBtn(index){
				this.matchType=index
				this.history=[]
				//获取历史预测
				this.expertHistoryFact()
			},
			//用户个人主页
			expertHomepage(){
				let params={
					uid:this.uid
				}
				uni.$u.http.get(this.api.api_v1_recommend_expertHomepage, {params:params}).then(res => {
					if(res.code==200&&res.data){
						this.userData=res.data
					}
				})
			},
			//获取历史预测
			expertHistoryFact(){
				let params={
					uid:this.uid,
					matchType:this.matchType,
					page:this.load.page,
				}
				uni.$u.http.get(this.api.api_v1_recommend_expertHistoryFact, {params:params}).then(res => {
					if(!res.data.next_page_url){
						this.load.end=true
					}
					if(res.code==200&&res.data&&res.data.data){
						this.history=this.history.concat(res.data.data)
					}
				})
			},
			
			
		}
		
	}
</script>

<style lang="scss" scoped>
	.uni-loadmore{
		height: 30px;text-align: center;width: 100%;color: #fff;line-height: 30px;font-size: 14px;
	}
	.content{
		color: #fff;font-size: 12px;
		.cc{
			width: 100%;background-color: #242448;padding: 10px;box-sizing: border-box;border-radius: 5px;
			display: flex;align-items: center;justify-content: space-between;
			.image{
				width:50px;height: 50px;border-radius: 50%;margin-right: 10px;
			}
			.cc-center{
				flex: 1;
				.c-tt{
					font-size: 14px;margin-bottom: 10px;
				}
			}
			.cc-right{
				display: flex;flex-direction: column;justify-content: center;align-items: center;
				.btn{
					padding: 5px 10px;background-color: #f56c6c;color: #fff;font-size: 12px;border-radius: 5px;
				}
				.myFollow{
					background-color: #c5c5c5;
				}
			}
		}
		.btn-warp{
			width: 100%;display: flex;align-items: center;padding: 10px 20px;font-size: 14px;
			.btn {
				padding: 5px 15px;
			}
			.active{
				border-bottom: 1px solid #f56c6c; color: #f56c6c;
			}
		}
		.ccc{
			padding: 10px;box-sizing: border-box;
			
			
			.mark-1{
				background-color: #242448;padding: 10px 15px;box-sizing: border-box;border-radius: 5px;
				font-size: 14px;
				.block-box{
					display: flex;margin-bottom: 5px;
					.block{
						flex: 1;border-bottom:0.5px solid #666;border-top:0.5px solid #666;border-right: 0.5px solid #666;height:60px;position: relative;
						&:first-child{
							border-left: 0.5px solid #666;	
						}
						.bc-red,.bc-close,.bc-green{
							display:flex;justify-content: center;align-items: center;
							position: absolute;left: -5px;top: -8px;
							// background-color: red;
						}
						.bc-green{
							bottom: -5px;top: inherit;
							// background-color: #1296DB;
						}
						.bc-close{
							bottom: -5px;top: inherit;
							// background-color: #1AFA29;
						}
					}
					.last-block{
						position: relative;
						.bc-red,.bc-close,.bc-green{
							display:flex;justify-content: center;align-items: center;
							position: absolute;left: -5px;top: -8px;
							// background-color: red;
						}
						.bc-green{
							bottom: -5px;top: inherit;
							// background-color: #1296DB;
						}
						.bc-close{
							bottom: -5px;top: inherit;
							// background-color: #1AFA29;
						}
					}
					.top-line{
						border-top:0.5px solid #fff;
					}
					.right-line{
						background: linear-gradient(to bottom right,transparent 0,transparent calc(50% - 1.5px),#fff 50%,transparent calc(50% + 1.5px),transparent);
					}
					.left-line{
						background: linear-gradient(to top right,transparent 0,transparent calc(50% - 1.5px),#fff 50%,transparent calc(50% + 1.5px),transparent);
					}
					.bottom-line{
						border-bottom: 0.5px solid #fff;
					}
				}
				.warp{
					display: flex;justify-content: space-between;
					.m1{
						display: flex;flex-direction: column;align-items: center;justify-content: center;line-height: 22px;
						.red{
							color: red;
						}
					}
				}
			}
			.zaishou{
				background-color: #242448;padding: 10px 15px;margin: 10px 0;
				.title{
					font-size: 14px;width: 100%;border-bottom: 1px solid #4b4b98;line-height: 30px;font-weight: bold;
				}
				.item{
					padding: 10px 0;border-bottom: 1px solid #4b4b98;
					.bbtn{
						padding: 4px 15px;background-color: rgb(240, 69, 69);border-radius: 15px;
					}
					.i1{
						display: flex;align-items: center;
						.name{
							margin-right: 20px;max-width: 300rpx;
						}
					}
					.i2{
						font-size: 14px;line-height:20px;margin: 10px 0;
					}
					.i3{
						display: flex;justify-content: space-between;align-items: center;
						.right{
							display: flex;align-items: center;
							.num {
								font-size: 16px;color: #f9da8a;margin-right: 10px;
							}
							.image{
								width: 20px;height: 16px;
							}
							.yuan{
								width: 30px;height: 30px;text-align: center;line-height: 30px;border-radius: 50%;
							}
						}
						
					}
				}
			}
		}
		
		
	}
</style>
